<div class="VMSlibrary smallContent  "   style="background-color: #353c70; ">
    <div class="content">
        <div class="header">
            <span style="color: #1890ff;"><i class="iconfont icon-peizhiguanli"></i> {{"DisseminationManagement.MessageLibrary.VMS_Library" | translate}}</span>
            <div style="width:1rem;">
                <button nz-button nzType="primary" nzBlock (click)="copyToInfo()">{{"DisseminationManagement.MessageLibrary.Add" | translate}}</button>
            </div>
        </div>
        <div class="messageCategory">
            <label style="color: #7B82B8;">{{"DisseminationManagement.MessageLibrary.Message_Category" | translate}}</label>
            <nz-select style="width: 3rem;" [(ngModel)]="searchData.messageCategory" nzAllowClear nzPlaceHolder="Choose" (ngModelChange)="getData()">
                <nz-option *ngFor="let item of addService.selectionList.messageCategory" [nzValue]="item.categoryName" [nzLabel]="item.categoryName"></nz-option>
            </nz-select>
        </div>
        <div nz-row nzType="flex" nzJustify="center" class="searchInput">
            <div class="input" nz-col nzSpan="22">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input type="text" nz-input placeholder="Search for keyword..." [(ngModel)]="searchData.keyword" (keyup)="onSearch()" style="background-color: #353c70; color: #7B82B8; "/>
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i nz-icon type="search"></i>
                </ng-template>
            </div>
        </div>
        <div nz-row nzType="flex" nzJustify="center">
            <div class="table" nz-col nzSpan="22">
                <nz-table #headerTable [nzData]="listOfData" [nzPageSize]="listOfData.length" [nzShowPagination]="false" [nzScroll]="{ y: '1.5rem' }">
                    <thead>
                        <tr class="tableHead">
                            <th style="background-color: #2c3054; color: white;">{{"DisseminationManagement.MessageLibrary.Message" | translate}}</th>
                            <th  style="background-color: #2c3054; color: white;">{{"DisseminationManagement.MessageLibrary.Content" | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of headerTable.data;index as i" (click)="clickTR(i)" [class.active]="data.active">
                            <td>
                                <div style="width: 1.1rem;height:0.4rem;display: flex;justify-content: center;align-items: center;">
                                    <!-- <itmp-thumbnail [imgs]="data.template.templatePages[0].templateGraphics"></itmp-thumbnail> -->
                                    <img [src]="data.url?data.url.split(',')[0]:''" alt="" style="max-width: 100%;max-height:100%">
                                  </div>
                            </td>
                            <td>
                                <div>
                                    {{ !isShowVietName ? data.template.templateName :data.template.templateName}}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </div>
</div>